<template>
  <div class="custom-set full-height">
    <div class="left full-height page-content part">
      <q-list>
        <q-item v-for="(item,index) in customerList" :key="index"
                clickable v-ripple
                @click="selSet(item)"
                :active="item.desc===selectDesc">
          <q-item-section>{{item.name}}</q-item-section>
        </q-item>
      </q-list>
    </div>
    <div class="right full-height page-content">
      <q-scroll-area ref="scrollArea" style="height: 100%; max-width: 100%" :thumbStyle="CommonConfig.thumbStyle">
        <!--停机设置-->
<!--        <set-item title="停机设置" desc="系统自动识别停机原因，取放停机与小停机的设置项。" @save="saveStopSet" id="stopSet">-->
<!--          <template>-->
<!--            <p class="sub-title">小停机 <span class="gray-txt">(停机时长 ≤ xS)</span></p>-->
<!--            <slider v-model="smallStop1" :max="300" :min="0" />-->
<!--            <p class="sub-title margin-t-30">取放停机 <span class="gray-txt">(停机时长为循环取放时长的 x% ~ y%)</span></p>-->
<!--            <div class="range">-->
<!--              <q-range v-model="stopRange1" :min="0" :max="500" label label-color="dark" />-->
<!--            </div>-->
<!--          </template>-->
<!--        </set-item>-->

        <!--派工精度设置-->
        <set-item title="派工精度设置" desc="计划派工精度的选择项。" @save="saveProgressSet" id="progressSet">
          <template>
            <q-option-group
              :options="accuracyOpt"
              label=""
              type="radio"
              v-model="accuracySel1"
            />
          </template>
        </set-item>
        <!--自动打回功能设置-->
        <set-item class="margin-t-24" title="自动打回功能设置" desc="按车间分级打回功能，可自动打回当班所有未完工的工单。" id="autoRepulse" :showBtn="false">
          <template>
            <div class="row" style="margin: 0 -10px">
              <div v-for="(item, index) in autoRepulseList" :key="index" class="col-2" style="padding: 0 10px">
                <q-toggle :label="item.workshopName"
                          left-label
                          size="16px"
                          style="max-width: 100%"
                          :value="item.isAutoWithdraw"
                          @input="saveAutoRepulseVal(item)"/>
                <q-tooltip>{{item.workshopName}}</q-tooltip>
              </div>
            </div>
          </template>
        </set-item>

        <!--合格率阈值-->
        <set-item class="margin-t-24" title="合格率阈值" desc="计划进度查询中，生产合格率小于百分之x时，预警提示颜色设定。" @save="saveQualifyVal" id="qualifyVal">
          <template>
            <slider v-model="qualifyVal1" :max="100" :min="0" color="positive" />
          </template>
        </set-item>

        <!--定额修正-->
        <set-item class="margin-t-24" title="定额修正" desc="实际生产节拍大于或小于x%时，在工时定额中给出修正建议的设置。" @save="saveNormRevise" id="normRevise">
          <template>
            <slider v-model="normReviseVal1" :max="100" :min="0" />
          </template>
        </set-item>

        <!--刀具寿命预设-->
        <set-item class="margin-t-24" title="刀具寿命预设" desc="设置刀具寿命预警值设定，低于x%时警告，低于y%时报警。" @save="saveCutterLife" id="cutterLife">
          <template>
            <div class="cutter-life">
              <q-range
                :style="trackBg.cutterLife"
                class="range-track"
                v-model="cutterLifeVal1"
                :min="0"
                :max="100"
                label
                label-color="dark"
              />
            </div>
          </template>
        </set-item>

        <!--模具寿命预设-->
        <set-item class="margin-t-24" title="模具寿命预设" desc="设置模具寿命预警值设定，低于x%时警告，低于y%时报警。" @save="saveMoldLife" id="moldLife">
          <template>
            <div class="cutter-life">
              <q-range
                :style="trackBg.moldLife"
                class="range-track"
                v-model="moldLifeVal1"
                :min="0"
                :max="100"
                label
                label-color="dark"
              />
            </div>
          </template>
        </set-item>
        <!--维修验收设定-->
        <set-item class="margin-t-24" title="维修验收设定" desc="设置维修验收时长，当超过x时x分x秒时，自动验收成功。" @save="saveAutoCheckTime" id="checkTime">
          <template>
            <div class="card">
              <div class="periods-wrapper margin-b-20">
                <span class="label margin-r-10">验收时长：</span>
                <!-- 小时 -->
                <q-input
                  @input="judgeHours()"
                  v-model.number="checkTime1.hour"
                  dense
                  outlined
                >
                  <template v-slot:after><label class="name">时</label></template>
                </q-input>
                <!-- 分钟 -->
                <q-input
                  @input="judgeMinutes()"
                  v-model.number="checkTime1.minute"
                  dense
                  outlined
                >
                  <template v-slot:after><label class="name">分</label></template>
                </q-input>
                <!--              &lt;!&ndash; 秒 &ndash;&gt;-->
                <!--              <q-input-->
                <!--                @input="judgeSeconds()"-->
                <!--                v-model.number="checkTime1.second"-->
                <!--                type="tel"-->
                <!--                dense-->
                <!--                outlined-->
                <!--              >-->
                <!--                <template v-slot:after><label class="name">秒</label></template>-->
                <!--              </q-input>-->
              </div>
            </div>
          </template>
        </set-item>

        <!--EMS预警设置-->
        <set-item class="margin-t-24" title="EMS预警设置" desc="实际报警百分比大于x%时，在EMS模块机床分布图内实时报警占比值为红色警告。" @save="saveEMS" id="ems">
          <template>
            <slider v-model="emsVal1" :max="100" :min="0" color="negative" />
          </template>
        </set-item>
        <!--状态名称自定义-->
        <set-item class="margin-t-24" title="状态名称设置" desc="支持自定义设置状态的名称" @save="saveStatusName" id="status">
          <template>
            <div v-for="(item, index) in statusList" :key="index">
              <div class="flex items-start" style="margin-bottom: 10px">
                <div :style="{'background-color': item.color}" class="status-color"></div>
                <div class="cursor-pointer margin-l-10">
                  <q-icon name="iconfont icontubiao-72" class="font-18 text-grey"/>
                  <q-tooltip max-width="300px">{{item.tip}}</q-tooltip>
                </div>
                <yz-input v-model="item.label"
                          class="margin-l-10"
                          :rules="[0, 6]"
                          :hintRule="[val => val.length <=2  || '最大输入长度为2']"
                          title=""/>
              </div>
            </div>
          </template>
        </set-item>
        <!--生产进度设置-->
        <set-item class="margin-t-24" title="生产进度设置" desc="绿色进度条生产落后进度百分比小于x%时，为正常；黄色进度条生产落后进度百分比在x%至y%之间时，为稍微落后；红色进度条生产落后百分比大于y%时，为严重落后。" @save="saveProductionVal" id="production">
          <template>
            <div class="cutter-life production">
              <q-range
                :style="trackBg.production"
                class="range-track"
                v-model="productionVal1"
                :min="0"
                :max="100"
                label
                label-color="dark"
              />
            </div>
          </template>
        </set-item>
        <!--定额修正-->
        <set-item class="margin-t-24" title="不良率设置" desc="当产品不良率大于x%时，该产品黄色告警。" @save="saveDefectRate" id="defectRate">
          <template>
            <slider v-model="defectRateVal1" :max="100" :min="0" color="warning" />
          </template>
        </set-item>

<!--        <set-item class="margin-t-24" title="工厂建模排序" @save="saveSchemeOrderBy" id="schemeOrderBy">-->
<!--          <template>-->
<!--            <q-radio v-model="schemeOrderBy1" :val="0" label="创建时间倒序" />-->
<!--            <q-radio v-model="schemeOrderBy1" :val="1" label="创建时间正序" />-->
<!--          </template>-->
<!--        </set-item>-->
      </q-scroll-area>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
import SetItem from 'src/components/set-item'
import Slider from 'src/components/slider'
import refreshMixin from '../../assets/js/refresh-mixin'
import { getCustomerSet, setCustomerSet, getOrganize, setAutoWithdraw } from 'src/boot/system/customer-set'
import _ from 'lodash'
import { debounce } from 'quasar'
export default {
  name: 'custom-set',
  mixins: [refreshMixin],
  data () {
    return {
      moldLifeVal1: {
        min: 10,
        max: 30
      },
      cutterLifeVal1: {
        min: 10,
        max: 30
      }, // 刀具寿命
      productionVal1: {
        min: 10,
        max: 50
      }, // 生产进度设置
      defectRateVal1: 10, // 不良率
      customerList: [ // 左侧列表数据
        // {
        //   name: '停机设置',
        //   desc: 'stopSet'
        // },
        {
          name: '派工精度设置',
          desc: 'progressSet'
        },
        {
          name: '自动打回功能设置',
          desc: 'autoRepulse'
        },
        {
          name: '合格率阈值',
          desc: 'qualifyVal'
        },
        {
          name: '定额修正',
          desc: 'normRevise'
        },
        {
          name: '刀具寿命预设',
          desc: 'cutterLife'
        },
        {
          name: '模具寿命预设',
          desc: 'moldLife'
        },
        {
          name: '维修验收设定',
          desc: 'checkTime'
        },
        {
          name: 'EMS预警设置',
          desc: 'ems'
        },
        {
          name: '状态名称设置',
          desc: 'status'
        },
        {
          name: '生产进度设置',
          desc: 'production'
        },
        {
          name: '不良率设置',
          desc: 'defectRate'
        }
        // {
        //   name: '工厂建模排序',
        //   desc: 'schemeOrderBy'
        // }
      ],
      selectDesc: 'progressSet', // 左侧选中项
      smallStop1: 5, // 小停机值
      stopRange1: { min: 50, max: 200 }, // 取放时长
      accuracyOpt: [ // 派工精度选项
        { label: '整数', value: 0 },
        { label: '1位小数', value: 1 }
      ],
      statusList: [
        { color: '#18D77F', value: 1, key: 'runningName', tip: '网关与设备通讯正常，并且设备正在运行', label: '' },
        { color: '#FF8559', value: 0, key: 'stopName', tip: '网关与设备通讯正常，但设备没有运行', label: '' },
        { color: '#999999', value: 3, key: 'disconnectName', tip: '网关与设备无连接，但与服务器通讯正常', label: '' },
        { color: '#666666', value: 2, key: 'offlineName', tip: '网关与云端服务器长时间无通讯', label: '' },
        { color: '#E43434', value: 4, key: 'alarmName', tip: '网关与设备通讯正常，且设备产生了报警信号', label: '' }
      ],
      accuracySel1: 1, // 精度选中项
      autoRepulseList: [], // 是否自动打回
      qualifyVal1: 60, // 合格率阈值
      normReviseVal1: 5, // 定额修正
      trackBg: { // 滑轨颜色
        cutterLife: '',
        moldLife: '',
        production: ''
      },
      checkTime1: {
        hour: 0,
        minute: 0,
        second: 0
      }, // 自动维修验收
      emsVal1: 10,
      schemeOrderBy1: 0
    }
  },
  computed: {
    ...mapGetters([
      'smallStop',
      'stopRange',
      'progressSet',
      'qualifyVal',
      'normRevise',
      'checkTime',
      'cutterLife',
      'productionVal',
      'schemeOrderBy'
    ])
  },
  watch: {
    smallStop (newVal) {
      console.log(newVal)
      this.smallStop1 = newVal
    },
    stopRange (newVal) {
      this.stopRange1 = newVal
    },
    progressSet (newVal) {
      this.accuracySel1 = newVal
    },
    qualifyVal (newVal) {
      this.qualifyVal1 = newVal
    },
    normRevise (newVal) {
      this.normReviseVal1 = newVal
    },
    moldLifeVal1 (newVal) {
      this.trackStyle(newVal, 'moldLife')
    },
    cutterLifeVal1 (newVal) {
      this.trackStyle(newVal, 'cutterLife')
    },
    productionVal1 (newVal) {
      this.trackStyle(newVal, 'production', ['#18D77F', '#F7B82D', '#E43434'])
    }
  },
  // async created () {
  //   // 更新客制化设置数据
  //   this.getInfo()
  //   this.smallStop1 = this.smallStop
  //   this.stopRange1 = this.stopRange
  //   this.accuracySel1 = this.progressSet
  //   this.qualifyVal1 = this.qualifyVal
  //   this.normReviseVal1 = this.normRevise
  //   this.checkTime1 = this.checkTime
  //   this.cutterLifeVal1 = this.cutterLife
  //   this.productionVal1 = this.productionVal
  //   this.defectRateVal1 = this.defectRate
  //   this.getAutoRepulseList()
  //   this.setAutoScroll()
  // },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getInfo()
      vm.smallStop1 = vm.smallStop
      vm.stopRange1 = vm.stopRange
      vm.accuracySel1 = vm.progressSet
      vm.qualifyVal1 = vm.qualifyVal
      vm.normReviseVal1 = vm.normRevise
      vm.checkTime1 = vm.checkTime
      vm.cutterLifeVal1 = vm.cutterLife
      vm.moldLifeVal1 = vm.moldLife
      vm.productionVal1 = vm.productionVal
      vm.defectRateVal1 = vm.defectRate
      vm.schemeOrderBy1 = vm.schemeOrderBy
      vm.getAutoRepulseList()
      vm.setAutoScroll()
    })
  },
  methods: {
    // 刀具轨迹样式
    trackStyle (data, type, color = ['#E43434', '#F7B82D', '#18D77F']) {
      if (!data) return
      const { min, max } = data
      this.trackBg[type] = {
        '--track-bg': `linear-gradient(90deg, ${color[0]} 0%,${color[0]} ${min}%,${color[1]} ${min}%,${color[1]} ${max}%,${color[2]} ${max}%,${color[2]} 100%)`
      }
    },
    getInfo () {
      getCustomerSet().then(res => {
        this.smallStop1 = res.smallStop
        this.stopRange1 = {
          min: res.takePlaceStopMin,
          max: res.takePlaceStopMax
        }
        this.accuracySel1 = res.sendPrecision
        this.qualifyVal1 = res.passRate
        this.normReviseVal1 = res.normRevise
        this.cutterLifeVal1 = {
          min: res.cutterAlarmWeb,
          max: res.cutterWarningWeb
        }
        this.moldLifeVal1 = {
          min: res.moldAlarmWeb,
          max: res.moldWarningWeb
        }
        this.emsVal1 = res.emsWarning || 10

        this.productionVal1 = {
          min: res.productionAlarm,
          max: res.productionWarning
        }

        this.defectRateVal1 = res.productBadWarning
        this.schemeOrderBy1 = res.schemeOrderBy

        this.statusList[0].label = res.runningName
        this.statusList[1].label = res.stopName
        this.statusList[2].label = res.disconnectName
        this.statusList[3].label = res.offlineName
        this.statusList[4].label = res.alarmName

        this.setSmallStop(this.smallStop1)
        this.setStopRange(this.stopRange1)
        this.setProgressSet(this.accuracySel1)
        this.setQualifyVal(this.qualifyVal1)
        this.setNormeRise(this.normReviseVal1)
        this.setCutterLife(this.cutterLifeVal1)
        this.setMoldLife(this.moldLifeVal1)
        this.setProduction(this.productionVal1)
        this.setDefectRate(this.defectRateVal1)
        this.setSchemeOrderby(this.schemeOrderBy1)

        if (_.isNil(res.repairCheck)) {
          this.checkTime1 = {
            hour: 0,
            minute: 0
          }
          this.setCheckTime(0)
        } else {
          this.checkTime1 = {
            hour: Math.floor(parseInt(res.repairCheck) / 3600),
            minute: Math.floor(parseInt(res.repairCheck) % 3600 / 60)
            // second: Math.floor(parseInt(res.repairCheck) % 3600 % 60)
          }
          this.setCheckTime(Math.floor(parseInt(res.repairCheck)))
        }
      })
    },
    // 获取自动打回列表
    getAutoRepulseList () {
      getOrganize().then(res => {
        this.autoRepulseList = res
      }).finally(() => {
        this.$q.loading.hide()
      })
    },
    // 修正时间校验（小时）
    judgeHours () {
      this.$set(this.checkTime1, 'hour', this.checkTime1.hour.toString().replace(/[^\d.]/g, ''))
      if (!/^[0-9]*[1-9][0-9]*$/.test(this.checkTime1.hour)) {
        this.checkTime1.hour = null
      }
    },
    // 修正时间校验（分钟）
    judgeMinutes () {
      this.$set(this.checkTime1, 'minute', this.checkTime1.minute.toString().replace(/[^\d.]/g, ''))
      // if (!/^[0-9]*[1-9][0-9]*$/.test(this.checkTime1.minute)) {
      //   this.checkTime1.minute = null
      // }
      if (this.checkTime1.minute >= 60) {
        this.$set(this.checkTime1, 'minute', 59)
      }
    },
    // // 修正时间校验（秒）
    // judgeSeconds () {
    //   this.$set(this.checkTime1, 'second', this.checkTime1.second.toString().replace(/[^\d.]/g, ''))
    //   // if (!/^[0-9]*[1-9][0-9]*$/.test(this.checkTime1.second)) {
    //   //   this.checkTime1.second = null
    //   // }
    //   if (this.checkTime1.second >= 60) {
    //     this.$set(this.checkTime1, 'second', 59)
    //   }
    // },
    // 切换设置位置
    selSet (item) {
      this.selectDesc = item.desc
      // document.getElementById(item.desc).scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' })
      this.$refs.scrollArea.setScrollPosition(document.getElementById(item.desc).offsetTop, 200)
    },
    // 保存自动打回
    saveAutoRepulseVal (item) {
      // const selList = this.autoRepulseList1.filter(item => item.isChecked)
      // const selIds = _.map(selList, 'id')
      // console.log(selIds)
      this.$q.loading.show()
      setAutoWithdraw(item.workshopId, item.isAutoWithdraw).then(res => {
        if (res.code + '' === '1200') {
          this.$message.success('保存成功！')
          this.getAutoRepulseList()
        } else {
          this.$q.loading.hide()
        }
      }).catch(() => {
        this.$q.loading.hide()
      })
    },
    // 保存停机设置
    saveStopSet () {
      let params = {
        smallStop: this.smallStop1,
        takePlaceStopMax: this.stopRange1.max,
        takePlaceStopMin: this.stopRange1.min
      }
      this.setCustomerSet(params)
    },
    // 保存刀具预警
    saveCutterLife () {
      let params = {
        cutterAlarm: this.cutterLifeVal1.min / 100,
        cutterAlarmWeb: this.cutterLifeVal1.min,
        cutterWarning: this.cutterLifeVal1.max / 100,
        cutterWarningWeb: this.cutterLifeVal1.max
      }
      this.setCustomerSet(params)
    },
    saveMoldLife () {
      let params = {
        moldAlarm: this.moldLifeVal1.min / 100,
        moldAlarmWeb: this.moldLifeVal1.min,
        moldWarning: this.moldLifeVal1.max / 100,
        moldWarningWeb: this.moldLifeVal1.max
      }
      this.setCustomerSet(params)
    },
    saveProductionVal () {
      let params = {
        productionAlarm: this.productionVal1.min,
        productionWarning: this.productionVal1.max
      }
      this.setCustomerSet(params)
    },
    // 保存派工进度设置
    saveProgressSet () {
      let params = {
        sendPrecision: this.accuracySel1
      }
      this.setCustomerSet(params)
    },
    // 保存合格率阈值
    saveQualifyVal () {
      let params = {
        passRate: this.qualifyVal1
      }
      this.setCustomerSet(params)
    },
    // 保存定额修正
    saveNormRevise () {
      let params = {
        normRevise: this.normReviseVal1
      }
      this.setCustomerSet(params)
    },
    validateVal () {
      let flag = true
      this.statusList.forEach(item => {
        flag && (flag = item.label.length && item.label.length <= 2 && /^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(item.label))
      })
      return flag
    },
    // 保存状态名称
    saveStatusName () {
      this.validateVal()
      let params = {
        runningName: this.statusList[0].label,
        stopName: this.statusList[1].label,
        disconnectName: this.statusList[2].label,
        offlineName: this.statusList[3].label,
        alarmName: this.statusList[4].label
      }
      this.validateVal() && this.setCustomerSet(params)
    },
    // 保存自动验收时间
    saveAutoCheckTime () {
      let repairCheck = this.checkTime1.hour * 3600 + this.checkTime1.minute * 60
      let params = {
        repairCheck: repairCheck
      }
      this.setCustomerSet(params)
    },
    setCustomerSet (params) {
      setCustomerSet(params).then(() => {
        this.getInfo()
        this.$message.success('保存成功！')
        this.saveCustomerSet()
      })
    },
    saveDefectRate () {
      const params = {
        productBadWarning: this.defectRateVal1
      }
      this.setCustomerSet(params)
    },

    saveSchemeOrderBy () {
      const params = {
        schemeOrderBy: this.schemeOrderBy1
      }
      this.setCustomerSet(params)
    },
    // 保存EMS预警值
    saveEMS () {
      const params = {
        emsWarning: this.emsVal1
      }
      this.setCustomerSet(params)
    },

    /**
     * 滚动时候设置瞄点
     */
    setAutoScroll () {
      this.$nextTick(() => {
        // 获取原dom结构
        const target = this.$refs.scrollArea.getScrollTarget()
        const setItems = document.querySelectorAll('.set-item')
        const scrollHandler = () => {
          if (!setItems) return
          setItems.forEach((setItem) => {
            const clientRect = setItem.getBoundingClientRect()
            // 获取距离顶部高度
            const top = clientRect.top
            // 获取元素的高度
            const height = clientRect.height
            // 如果距离顶部高度大于120且小于120+本身高度，证明元素肯定在顶部
            // 120是状态栏+tabbar等的固定值
            if (top > 120 && top < 120 + height) {
              const id = setItem.getAttribute('id')
              if (id) {
                this.selectDesc = id
              }
            }
          })
        }
        // 函数做防抖处理
        const scrollHandlerDebounce = debounce(scrollHandler, 50)
        // 监听滚动事件
        target.addEventListener('scroll', scrollHandlerDebounce, false)
        // 移除监听事件
        this.$once('hook:beforeDestroy', () => {
          target.removeEventListener('scroll', scrollHandler)
        })
      })
    },
    ...mapMutations({
      'setSmallStop': 'SET_SMALLSTOP',
      'setStopRange': 'SET_STOPRANGE',
      'setProgressSet': 'SET_PROGRESSSET',
      'setQualifyVal': 'SET_QUALIFYVAL',
      'setNormeRise': 'SET_NORMREVISE',
      'setCheckTime': 'SET_CHECK_TIME',
      'setCutterLife': 'SET_CUTTERLIFT',
      'setMoldLife': 'SET_MOLDLIFT',
      'setProduction': 'SET_PRODUCTION',
      'setDefectRate': 'SET_DEFECTRATE',
      'setSchemeOrderby': 'SET_SCHEMEORDERBY',
      'setAutoRepulse': 'SET_AUTO_REPULSE'
    }),
    ...mapActions([
      'saveCustomerSet'
    ])
  },
  components: {
    SetItem,
    Slider
  }
}
</script>

<style scoped lang="stylus">
.range-track{
  >>>.q-slider__track-container{
    background: var(--track-bg)
  }
}
  >>>.slider{
    padding 0
    >>>.q-item__section--side{
      padding-right 0
      padding-left 20px
    }
  }
.cutter-life{
  >>>.q-slider__track{
    background-color #F7B82D
    transition background-color .5s
  }
  .range-track{
    >:nth-child(2){
      &::before{
        border-color #E43434
      }
      >>>.q-slider__focus-ring{
        background-color #E43434 !important
      }
    }
    >:nth-child(3){
      &::before{
        border-color #F7B82D
      }
      >>>.q-slider__focus-ring{
        background-color #F7B82D !important
      }
    }
  }
  &.production{
    .range-track{
      >:nth-child(2){
        &::before{
          border-color #18D77F
        }
        >>>.q-slider__focus-ring{
          background-color #18D77F !important
        }
      }
    }
  }
}

.custom-set{
  display flex
  .left{
    flex 0 150px
    margin-right 24px
    padding-top 20px
  }
  .right{
    flex 1 1 auto
    padding 0
  }
  .sub-title{
    margin-bottom 0
    .gray-txt{
      color #999
    }
  }
  .range{
    height 70px
    display flex
    align-items flex-end
  }
  .margin-t-24{
    margin-top 24px
  }
  .card {
    width 240px
    font-size 16px

    .periods-wrapper {
      display flex
      align-items center

      .label {
        white-space nowrap
      }

      >>>.name {
        font-size: 16px;
        display: inline-block;
        color: #333;
        line-height: 31px;
        width 24px
      }
    }
  }
  >>>.q-toggle__label{
    display block
    word-break keep-all
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
  }
}
  .status-color{
    width 240px
    height 16px
    border-radius 8px
    margin-top 5px
  }
</style>
